<template>
    <div class="vendor-manage-page">
        <el-card>
            <div class="header-bar">
                <span class="title">供应商管理</span>
                <el-input v-model="search.name" placeholder="供应商名称" size="small"
                    style="width: 180px; margin-right: 8px;" clearable />
                <el-select v-model="search.level" placeholder="等级" size="small" style="width: 110px; margin-right: 8px;"
                    clearable>
                    <el-option v-for="l in levels" :key="l" :value="l" :label="l" />
                </el-select>
                <el-select v-model="search.enabled" placeholder="状态" size="small"
                    style="width: 110px; margin-right: 8px;" clearable>
                    <el-option label="启用" :value="true" />
                    <el-option label="停用" :value="false" />
                </el-select>
                <el-button type="primary" size="small" @click="onAdd">新增供应商</el-button>
            </div>
            <el-table :data="filteredList" border style="width:100%;margin-top:8px;">
                <el-table-column prop="code" label="编码" width="90" />
                <el-table-column prop="name" label="名称" min-width="100">
                    <template #default="{ row }">
                        <el-avatar :src="row.logo" size="small" v-if="row.logo" style="margin-right:8px;" />
                        {{ row.name }}
                    </template>
                </el-table-column>
                <el-table-column prop="level" label="等级" width="80">
                    <template #default="{ row }">
                        <el-tag size="small"
                            :type="row.level === 'A级' ? 'success' : (row.level === 'B级' ? 'info' : 'warning')">{{
                            row.level }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="creditCode" label="信用代码" min-width="120" />
                <el-table-column prop="score" label="评分" width="195">
                    <template #default="{ row }">
                        <el-rate v-model="row.score" :max="5" disabled show-score score-template="{value} 分" />
                    </template>
                </el-table-column>
                <el-table-column prop="enabled" label="状态" width="180">
                    <template #default="{ row }">
                        <el-switch v-model="row.enabled" active-text="启用" inactive-text="停用" />
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" fixed="right">
                    <template #default="{ row }">
                        <el-button size="small" type="info" link @click="onEdit(row)">编辑</el-button>
                        <el-button size="small" type="danger" link @click="onDelete(row)">删除</el-button>
                        <el-button size="small" type="primary" link @click="onComment(row)">评价</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 新增/编辑弹窗 -->
        <el-dialog v-model="editDialog.visible" :title="editDialog.isEdit ? '编辑供应商' : '新增供应商'" width="400px">
            <el-form :model="editDialog.form" label-width="80px">
                <el-form-item label="编码">
                    <el-input v-model="editDialog.form.code" />
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="editDialog.form.name" />
                </el-form-item>
                <el-form-item label="等级">
                    <el-select v-model="editDialog.form.level">
                        <el-option v-for="l in levels" :key="l" :value="l" :label="l" />
                    </el-select>
                </el-form-item>
                <el-form-item label="信用代码">
                    <el-input v-model="editDialog.form.creditCode" />
                </el-form-item>
                <el-form-item label="评分">
                    <el-rate v-model="editDialog.form.score" :max="5" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="editDialog.form.enabled" active-text="启用" inactive-text="停用" />
                </el-form-item>
                <el-form-item label="LOGO">
                    <el-input v-model="editDialog.form.logo" placeholder="可粘贴图片链接" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="editDialog.visible = false">取消</el-button>
                <el-button type="primary" @click="onSaveEdit">保存</el-button>
            </template>
        </el-dialog>
        <!-- 评价弹窗 -->
        <el-dialog v-model="commentDialog.visible" title="供应商评价" width="380px">
            <el-form :model="commentDialog.form" label-width="70px">
                <el-form-item label="评分">
                    <el-rate v-model="commentDialog.form.score" allow-half />
                </el-form-item>
                <el-form-item label="评价">
                    <el-input v-model="commentDialog.form.comment" type="textarea" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="commentDialog.visible = false">取消</el-button>
                <el-button type="primary" @click="onSaveComment">提交</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const levels = ['A级', 'B级', 'C级']
const search = reactive({ name: '', level: '', enabled: '' })

// 15条医药行业模拟数据
const vendorList = ref([
    { code: 'V001', name: '国药控股', level: 'A级', creditCode: '91310000132212324A', logo: '', score: 4.9, enabled: true },
    { code: 'V002', name: '华润医药', level: 'A级', creditCode: '91440101304776566P', logo: '', score: 4.8, enabled: true },
    { code: 'V003', name: '上海医药集团', level: 'A级', creditCode: '91310115631589987G', logo: '', score: 4.7, enabled: true },
    { code: 'V004', name: '石药集团', level: 'B级', creditCode: '91130921798163762Y', logo: '', score: 4.5, enabled: true },
    { code: 'V005', name: '扬子江药业', level: 'A级', creditCode: '91321000702067915R', logo: '', score: 4.6, enabled: true },
    { code: 'V006', name: '恒瑞医药', level: 'A级', creditCode: '91320500250805901Q', logo: '', score: 4.4, enabled: true },
    { code: 'V007', name: '复星医药', level: 'B级', creditCode: '91310000704321118Q', logo: '', score: 4.2, enabled: false },
    { code: 'V008', name: '齐鲁制药', level: 'A级', creditCode: '91370100708134573M', logo: '', score: 4.3, enabled: true },
    { code: 'V009', name: '正大天晴', level: 'B级', creditCode: '91320100134785222C', logo: '', score: 4.1, enabled: true },
    { code: 'V010', name: '丽珠医药', level: 'C级', creditCode: '91440300192278565B', logo: '', score: 4.0, enabled: true },
    { code: 'V011', name: '太极集团', level: 'B级', creditCode: '91500107202215559E', logo: '', score: 4.0, enabled: false },
    { code: 'V012', name: '天士力控股', level: 'C级', creditCode: '91120116560618207D', logo: '', score: 3.9, enabled: true },
    { code: 'V013', name: '哈药集团', level: 'C级', creditCode: '91230100227467247K', logo: '', score: 3.8, enabled: true },
    { code: 'V014', name: '东阿阿胶', level: 'B级', creditCode: '91371700744136019W', logo: '', score: 3.7, enabled: false },
    { code: 'V015', name: '白云山制药', level: 'A级', creditCode: '91440101190365193J', logo: '', score: 4.2, enabled: true },
])

const filteredList = computed(() => {
    return vendorList.value.filter(v => {
        return (!search.name || v.name.includes(search.name)) &&
            (!search.level || v.level === search.level) &&
            (search.enabled === '' || v.enabled === search.enabled)
    })
})

// 编辑/新增弹窗
const editDialog = reactive({
    visible: false,
    isEdit: false,
    form: { code: '', name: '', level: '', creditCode: '', logo: '', score: 4.5, enabled: true }
})

function onAdd() {
    Object.assign(editDialog.form, { code: '', name: '', level: '', creditCode: '', logo: '', score: 4.5, enabled: true })
    editDialog.isEdit = false
    editDialog.visible = true
}
function onEdit(row) {
    Object.assign(editDialog.form, { ...row })
    editDialog.isEdit = true
    editDialog.visible = true
}
function onSaveEdit() {
    if (!editDialog.form.code || !editDialog.form.name) {
        ElMessage.warning('请填写完整信息')
        return
    }
    if (editDialog.isEdit) {
        const idx = vendorList.value.findIndex(v => v.code === editDialog.form.code)
        if (idx !== -1) Object.assign(vendorList.value[idx], editDialog.form)
    } else {
        if (vendorList.value.some(v => v.code === editDialog.form.code)) {
            ElMessage.warning('编码重复')
            return
        }
        vendorList.value.push({ ...editDialog.form })
    }
    editDialog.visible = false
}

function onDelete(row) {
    const idx = vendorList.value.findIndex(v => v.code === row.code)
    if (idx !== -1) vendorList.value.splice(idx, 1)
    ElMessage.success('已删除')
}

// 供应商评价
const commentDialog = reactive({
    visible: false,
    row: null,
    form: { score: 5, comment: '' }
})

function onComment(row) {
    commentDialog.visible = true
    commentDialog.row = row
    commentDialog.form.score = row.score
    commentDialog.form.comment = row.comment || ''
}
function onSaveComment() {
    if (commentDialog.row) {
        commentDialog.row.score = commentDialog.form.score
        commentDialog.row.comment = commentDialog.form.comment
        ElMessage.success('评价成功')
    }
    commentDialog.visible = false
}
</script>

<style scoped>
.vendor-manage-page {
    padding: 28px 38px 30px 38px;
    min-height: 100vh;
    background: #fff;
}

.header-bar {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    gap: 8px;
}

.header-bar .title {
    font-size: 1.18rem;
    font-weight: 600;
    margin-right: 24px;
}
</style>
